<template>
  <!-- <q-card style="width: 500px">
      <q-card-section class="bg-primary text-white">
        <div class="text-h6">Please confirm the part detail</div>
      </q-card-section>
      <q-card-section v-if="serial_nos.length>0">
        <q-card-section>
          <div class="text-h6 text-red">The below Parts will auto defit</div>
        </q-card-section>
        <q-item-section  v-for="(item, index) in serials" :key="index">
            <li v-if="item!=''">
                Serial No : {{ item }}
            </li>
        </q-item-section>
      </q-card-section>

      <q-card-actions align="right">
        <q-btn
          flat
          label="OK"
          color="primary"
          v-close-popup
          @click="updateConfirm"
        />
      </q-card-actions>
    </q-card> -->
  <my-dialog
    title="Notice"
    class="text-indigo-8"
    content="Please check the part fit correctly before confirm"
    :confirm="updateConfirm"
  >
    <q-item-section  v-for="(item, index) in serials" :key="index">
      <li class="q-pa-sm" v-if="item != ''">Serial No : {{ item }}</li>
    </q-item-section>
  </my-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import MyDialog from '../container/MyDialog.vue';

const props = defineProps<{
  serials: string[];
}>();

const serial_nos = ref<string[]>([]);

if (props.serials) {
  serial_nos.value = [...props.serials];
}

const emit = defineEmits(['update']);

function updateConfirm() {
  emit('update');
}
</script>
